<!DOCTYPE html>
<html>
<head>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <title>用户注册</title>
        <link rel="stylesheet" href="../dist/css/layui.css">
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <!-- 引入 ECharts 文件 -->
        <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.0-beta.2/echarts.min.js"></script>
        <style>
            body {
                background: url("../img/00.png") 100% 0;
            }

            .layui-input {
                width: 300px;
                margin: 0 auto;
            }

            .layui-container {
                margin: 0 auto;
                width: 510px;
            }

            .layui-form-label {
                width: 70px;
                color: #00FFFF;
                text-align: center;
                background-color: #999999;
            }

            .layui-form {
                width: 500px;
            }

            #sex-checkbox {
                position: absolute;
                margin-left: 180px;
            }

            .layui-form-item {
                width: 400px;
                text-align: right;
            }
        </style>
    </head>
<body>
<!-- 示例-970 -->
<ins class="adsbygoogle" style="display:inline-block;width:970px;height:90px"
     data-ad-client="ca-pub-6111334333458862" data-ad-slot="3820120620"></ins>

<!--<legend style="margin: 0 auto">用户注册</legend>-->
<h1 style="color: #1E9FFF;font-size: 60px;" align="center">用户注册</h1>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;visibility: visible"></fieldset>

<div class="layui-container">

    <form class="layui-form" action="" lay-filter="example">
        <div class="layui-form-item">
            <label class="layui-form-label">用户名：</label>
            <div class="layui-input-block">
                <input type="text" name="username" lay-verify="title" autocomplete="off"
                       placeholder="请输入用户名/手机号" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">密 码：</label>
            <div class="layui-input-block">
                <input type="password" name="password" placeholder="请输入密码" autocomplete="off"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">邮 箱：</label>
            <div class="layui-input-block">
                <input type="text" name="email" lay-verify="title" autocomplete="off" placeholder="请输入您的邮箱"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">性 别：</label>
            <div class="layui-input-block" id="sex-checkbox">
                <input type="radio" name="sex" value="男" title="男" checked="">
                <input type="radio" name="sex" value="女" title="女">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit="" lay-filter="" onclick="regist()">立即注册</button>
            </div>
        </div>
    </form>
</div>
<!-- 引入 layui.js 的 <script> 标签最好放置在 html 末尾 -->
<script src="../dist/layui.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script>

    function regist() {
        var datas = $("form").serialize();
        if (datas.username == null) {
            alert("用户名不能为空")
            return false;
        } else if (datas.password == null) {
            alert("密码不能为空")
            return false;
        } else if (datas.email == null) {
            alert("邮箱不能为空")
            return false;
        }
        $.post("/regist", datas, function (result) {
            if (result.code == 200) {
                alert(result.code + '-----' + result.msg)
                window.location = 'login.html';
            }
        })

    }

</script>

</body>
</html>